<template>
  <a-modal
    v-model:visible="showModal"
    @close="onClose"
    @before-ok="onConfirm"
    :title="pageTlt"
    class="modal-dialog-wrapper"
    unmount-on-close
    :mask-closable="false"
    width="45vw"
  >
    <div style="height: 400px">
      <div class="mains" v-if="mainList && mainList.length > 0">
        <a-checkbox-group :default-value="pageCheckBox" @change="changeCheckbox">
          <a-checkbox :value="item.id" style="margin: 0 16px 20px 0" :disabled="item.status == 0" v-for="item in mainList" :key="item.id">{{
            item.name
          }}</a-checkbox>
        </a-checkbox-group>
      </div>
      <div class="main-add">
        没有符合的保养项目？
        <text class="add-button" @click="mainseditShow">立即添加</text>
      </div>
    </div>
  </a-modal>
  <mains-edit ref="mainsedit" @saveMainAdd="addMainSave" />
</template>

<script setup>
  import { ref } from 'vue'
  import mainsEdit from '../components/mains-edit.vue'
  import { getAllMaintenance } from '@/api/asset/maintenance'
  // import { Message } from '@arco-design/web-vue'

  const showModal = ref(false)
  const pageTlt = ref('选择保养项目')

  // 新添加保养项目完成后(添加组件点确认后),重新获取所有保养项,并勾选已勾选的
  const addMainSave = (backDetailList) => {
    pageCheckBox.value = []
    getAllMaintenance({ type: 1, status: 1 }).then((res) => {
      mainList.value = res.result
    })
    valuePageCheckBox(backDetailList) //默认显示选择的项，并处理格式
  }

  const mainList = ref([]) //所有项
  const checkoutLists = ref([])
  const show = (lists) => {
    pageCheckBox.value = []
    checkoutLists.value = lists
    console.log('checkoutLists.value => ', lists) //编辑时，已存在的保养项目
    if (lists && lists.length > 0) {
      valuePageCheckBox(lists) //默认显示选择的项，并处理格式
    }
    getAllMaintenance({ type: 1, status: 1 }).then((res) => {
      mainList.value = res.result
    })
    showModal.value = true
  }

  // detailList数据处理
  const detailList = ref([])
  const valueDetailList = () => {
    pageCheckBox.value.forEach((id) => {
      let index = checkoutLists.value.findIndex((item) => item.maintenanceProjectId == id)
      if (index != -1) {
        detailList.value.push(checkoutLists.value[index])
      } else {
        detailList.value.push({
          maintenanceProjectId: id,
          maintenanceName: mainList.value.find(function (x) {
            return x.id == id
          }).name,
          brandName: '',
          materialPrice: '',
          num: '',
          partPrice: '',
        })
      }
    })
    return detailList.value
  }

  // 编辑时，默认显示
  const pageCheckBox = ref([]) //默认显示的项 例[1245,1284,1242]
  const valuePageCheckBox = (data) => {
    console.log(data)
    data.forEach((i) => {
      pageCheckBox.value.push(i.maintenanceProjectId)
    })
  }

  // 选择
  const changeCheckbox = (e) => {
    console.log(e)
    pageCheckBox.value = e
  }

  const onClose = () => {
    showModal.value = false
  }

  const mainsedit = ref(null)
  const mainseditShow = () => {
    mainsedit.value.show(checkoutLists.value)
  }

  const emit = defineEmits(['saveCheck'])

  const onConfirm = (done) => {
    detailList.value = valueDetailList()
    emit('saveCheck', detailList.value)
    pageCheckBox.value = [] //清空
    detailList.value = [] //清空
    showModal.value = false
    done()
  }

  defineExpose({
    show,
  })
</script>

<style lang="less" scoped>
  .mains {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    a-checkbox {
      margin-bottom: 20px;
      margin-right: 16px;
    }
  }
  .main-add {
    color: #767676;
    font-size: 12px;
    .add-button {
      margin-left: 8px;
      color: #1890ff;
    }
  }
</style>
